import React from 'react'
import { Input, Form, Button } from 'antd'
import { UserOutlined, KeyOutlined } from '@ant-design/icons'
import { formConfig } from './config'
import _ from 'lodash'
import { withRouter } from 'react-router-dom'

const { Password } = Input

const Components = {
  Input,
  Password,
}

const prefixComponents = {
  UserOutlined,
  KeyOutlined,
}

const Login = ({ setIsLogin, history }) => {
  const onFinish = (values) => {
    window.sessionStorage.setItem('login', JSON.stringify(values))
    window.sessionStorage.setItem('username', values.userName)
    setIsLogin(true)
    history.push('/')
  }
  return (
    <div className="login">
      <div
        className="logo"
        style={{
          backgroundImage: `url(${
            require('@/style/images/wh_login_logo.png').default
          })`,
        }}
      ></div>
      <div className="login-form">
        <Form name="login" onFinish={onFinish}>
          {_.map(formConfig, (item, key) => {
            const Component = item.component ? Components[item.component] : ''
            const PrefixComponent = prefixComponents[item.prefix]
            return (
              <div key={item.id}>
                <Form.Item
                  name={item.name}
                  rules={item.rules}
                  {...item.props}
                  label={item.label}
                >
                  <Component
                    placeholder={item.placeholder}
                    size="large"
                    prefix={<PrefixComponent />}
                  />
                </Form.Item>
              </div>
            )
          })}
          <Form.Item className="login-submit">
            <Button type="primary" htmlType="submit">
              立 即 登 录
            </Button>
          </Form.Item>
        </Form>
      </div>
    </div>
  )
}

export default withRouter(Login)
